<script>
import { defineComponent } from "vue";
import {pageHandler} from '@/mixins/pageHandler'
import RightClickmenuList from "@/components/rightClickmenuList/rightClickMenuList.vue";
import YaokongDialog from "@/components/rightClickmenuList/yaokongDialog.vue";
import GuapaiDialog from "@/components/rightClickmenuList/guapaiDialog.vue";
import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";
import MonitorHeader from "@/components/MonitorHeader/MonitorHeader.vue";
import NetState from "@/components/controls/netState.vue";
import ConnectLine from "@/components/controls/connect-line.vue";
import TerminalSvg from "@/components/controls/terminal-svg.vue";
import RectSvg from "@/components/controls/rect-svg.vue";
import ShouCheSvg from "@/components/controls/shou-che-svg.vue";
import { submitOperateRecord } from "@/api/api";
import { wsSend } from "@/tools/sendMessage";
import KongZhiBaShou from "@/components/controls/KongZhiBaShou.vue";
import YingYaBan from "@/components/controls/YingYaBan.vue";
import GuangZiPai from "@/components/controls/GuangZiPai.vue";
import Zhanyongbian from "@/components/controls/zhanyongbian.vue";
import Dianrongqi from "@/components/controls/dianrongqi.vue";
import Diankangqi from "@/components/controls/dianKangQi.vue";
import DianLiuHuGanQi from "@/components/controls/dianLiuHuGanQi.vue";

export default defineComponent({
    name: "mxsb",
    components: {
        DianLiuHuGanQi,
        Diankangqi,
        Dianrongqi,
        Zhanyongbian,
        GuangZiPai, YingYaBan, KongZhiBaShou, ShouCheSvg, RectSvg, TerminalSvg, ConnectLine, NetState, MonitorHeader, ScaleBox, GuapaiDialog, YaokongDialog, RightClickmenuList },
    mixins: [pageHandler],
    data() {
        return {
            hardPlatenDataList: [],
            flexiblePlatenDataList: [],
            GZPDataList: [],
            netStateList: [],
            numList:[],
            bashouList:[],
            svgYaban:[],
        };
    },
    methods:{
        initData(e){
            const typeMap = {
                "压板": "hardPlatenDataList",
                "网络状态": "netStateList",
                "遥测":'numList',
                "把手":"bashouList",
                "光字牌":'GZPDataList'
            };

            for (const listName of Object.values(typeMap)) {
                this[listName] = [];
            }
            for (const [key, value] of Object.entries(e)) {
                for (const [type, listName] of Object.entries(typeMap)) {
                    const filtered = value.filter(item => item.type === type);
                    if (filtered.length > 0) {
                        this[listName].push({ name: key, list: filtered });
                    }
                }
            }
            console.log(this.numList)
        },
        dangwei(val) {
            wsSend({
                "cmd": "byqDwChange",
                "dataId":this.pageData['重要遥测'][3].data_id,
                "operate":val,
            });
            submitOperateRecord( {
                log_desc:`${this.$route.query.ftName}${val==='up'?'升':val==='down'?'降':'停'}档操作`
            })
        },
    }
});
</script>

<template>
    <div class="breaker-graph" @click="cancelLeftClickMenu" @contextmenu.stop="cancelLeftClickMenu" v-if="pageData">
        <scale-box :width="2320">
            <MonitorHeader :title="$route.query.ftName" >
                <template v-slot:btns>
                    <button @click="routerToMainPage">主接线图</button>
                    <button @click="clearAll($route.query.ftName)">画面清闪</button>
                    <button @click="operationRecords">操作记录</button>
                </template>
            </MonitorHeader>
            <main>
                <div>
                    <div class="line-wrapper">
                            <svg>
                                <g>
                                    <g transform="translate(220,0)">
                                        <line x1="0" y1="100" x2="400" y2="100" stroke="rgb(250,0,0)" stroke-width="5"></line>
                                        <line x1="50" y1="100" x2="50" y2="150" stroke="rgb(250,0,0)" stroke-width="2"></line>
                                        <line x1="350" y1="100" x2="350" y2="150" stroke="rgb(250,0,0)" stroke-width="2"></line>
                                        <line x1="200" y1="100" x2="200" y2="150" stroke="rgb(250,0,0)" stroke-width="2"></line>
                                        <terminal-svg
                                            :state="Number(pageData['dd'][0].state_val)"
                                            :stateDesc="pageData['dd'][0].state_desc"
                                            :name="pageData['dd'][0].state_desc"
                                            :scale=0.8
                                            :info="pageData['dd'][0]"
                                            :translate-x="68"
                                            :translate-y="202"
                                            :text-translate-y="55"
                                            :text-translate-x="47"
                                            :rotate="180"
                                            @itemRightClick="itemRightClick"
                                        />
                                        <terminal-svg
                                            :state="Number(pageData['dd'][1].state_val)"
                                            :stateDesc="pageData['dd'][1].state_desc"
                                            :name="pageData['dd'][1].state_desc"
                                            :scale=0.8
                                            :info="pageData['dd'][1]"
                                            :translate-x="368"
                                            :translate-y="202"
                                            :text-translate-y="55"
                                            :text-translate-x="47"
                                            :rotate="180"
                                            @itemRightClick="itemRightClick"
                                        />
                                        <dian-liu-hu-gan-qi :rotate="90" :translate-y="19" :translate-x="340" color="rgb(250,0,0)"></dian-liu-hu-gan-qi>
                                    </g>
                                    <g transform="translate(220,300)">
                                        <line x1="0" y1="100" x2="400" y2="100" stroke="rgb(250,0,0)" stroke-width="5"></line>
                                        <line x1="50" y1="100" x2="50" y2="150" stroke="rgb(250,0,0)" stroke-width="2"></line>
                                        <line x1="350" y1="100" x2="350" y2="150" stroke="rgb(250,0,0)" stroke-width="2"></line>
                                        <line x1="200" y1="100" x2="200" y2="150" stroke="rgb(250,0,0)" stroke-width="2"></line>
                                        <terminal-svg
                                            :state="Number(pageData['dd'][2].state_val)"
                                            :stateDesc="pageData['dd'][2].state_desc"
                                            :name="pageData['dd'][2].state_desc"
                                            :scale=0.8
                                            :info="pageData['dd'][2]"
                                            :translate-x="68"
                                            :translate-y="202"
                                            :text-translate-y="55"
                                            :text-translate-x="47"
                                            :rotate="180"
                                            @itemRightClick="itemRightClick"
                                        />
                                        <terminal-svg
                                            :state="Number(pageData['dd'][3].state_val)"
                                            :stateDesc="pageData['dd'][3].state_desc"
                                            :name="pageData['dd'][3].state_desc"
                                            :scale=0.8
                                            :info="pageData['dd'][3]"
                                            :translate-x="368"
                                            :translate-y="202"
                                            :text-translate-y="55"
                                            :text-translate-x="47"
                                            :rotate="180"
                                            @itemRightClick="itemRightClick"
                                        />
                                        <dian-liu-hu-gan-qi :rotate="90" :translate-y="19" :translate-x="340" color="rgb(250,0,0)"></dian-liu-hu-gan-qi>
                                    </g>
                                </g>

                            </svg>
                    </div>
                    <div class="num-wrapper">
                        <div class="remote-measurement-wrapper">
                            <div class="remote-measurement-table">
                                <table border="3" cellspacing="0">
                                    <colgroup>
                                        <col style="width: 25%;" />
                                        <col style="width: 25%;" />
                                        <col style="width: 25%;" />
                                        <col style="width: 25%;" />
                                    </colgroup>
                                    <tbody>
                                    <tr style="background-color: rgb(35,130,222)">
                                        <td></td>
                                        <td>{{numList[0].name}}</td>
                                        <td>{{numList[1].name}}</td>
                                        <td>单位</td>
                                    </tr>
                                    <tr v-for="(item, index) in numList[0].list" :key="index"   :style="{ backgroundColor: index % 2 === 0 ? 'rgb(36, 104, 176)' : 'rgb(35, 130, 222)' }">
                                        <td :style="{color: 'white'}">{{item.state_desc}}</td>
                                        <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(item,true)">{{Number(item.state_val).toFixed(2)}}</td>
                                        <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(numList[1].list[index],true)">{{Number(numList[1].list[index].state_val).toFixed(2)}}</td>
                                        <td :style="{color: 'white'}">{{item.unit}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="control-handle-wrapper">
                        <div style="font-size: 1.6rem;text-align: center;margin-bottom: 1rem">测控屏把手</div>
                        <div class="control-handle-grid" style="  grid-template-columns: repeat(3, 1fr);">
                        </div>
                    </div>
                    <div class="control-handle-wrapper">
                        <div style="font-size: 1.6rem;text-align: center;margin-bottom: 1rem">汇控柜把手</div>
                        <div class="control-handle-grid">
                            <div v-for="(item, index) in bashouList[0].list" :key="index" class="control-handle-grid-item">
                                <template v-if="item.isEmpty"></template>
                                <template v-else>
                                    <div class="svg-wrapper">
                                        <svg>
                                            <g v-if="item.state_desc.includes('解锁')">
                                                <text x="20" y="15" fill="#FFFFFF" font-size="12px">联锁</text>
                                                <text x="60" y="60" fill="#FFFFFF" font-size="12px">解锁</text>
                                            </g>
                                            <g v-else>
                                                <text x="20" y="15" fill="#FFFFFF" font-size="12px">远方</text>
                                                <text x="60" y="60" fill="#FFFFFF" font-size="12px">就地</text>
                                            </g>
                                        </svg>
                                        <div class="polygon-icon">
                                            <div  class="cursor-pointer" style="cursor: pointer">
                                                <KongZhiBaShou style="margin-top: -10px" :info=" bashouList[0].list[index]" :name="item.state_desc" :state="Number(item.state_val)"  @itemRightClick="itemRightClick" :deviceName="item.state_desc"  :jianGeMing="item.jg_name"></KongZhiBaShou>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="grid-item-name">{{item.state_desc}}</div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="netState" >
                        <div style="font-size: 1.6rem;text-align: center;margin-bottom: 1rem">{{$route.query.ftName}}测控装置监视</div>
                        <div style="display: flex ;justify-content: center;">
                            <div  v-for="item in this.netStateList" style="width: 18%;border: 1px solid #fff;border-radius: 10px;background-color:rgb(40, 71, 106);">
                                <div style="text-align: center;font-size: 1.2rem;">{{item.name}}</div>
                                <div style="display: flex;" v-for="items in item.list" >
                                    <div style="width: 100%;text-align: center">{{items.state_desc}}</div>
                                    <net-state :info="items" :state="items.state_val" ></net-state>
                                </div>

                            </div>
                        </div>

                    </div>
                    <div class="gzp-wrapper">
                        <div style="font-size: 1.6rem;text-align: center;margin-bottom: 1rem">{{$route.query.ftName}}信息光字牌</div>
                        <div class="gzpInner">
                            <div class="gzpItem">
                                <div v-for="item in GZPDataList[0].list.slice(0,GZPDataList[0].list.length/2)">
                                    <GuangZiPai :set-hei="true" height="22" :info="item" :isClear="+item.is_clear" :jianGeMing="item.jg_name" :name="item.state_desc" :state="Number(item.state_val)"></GuangZiPai>
                                </div>
                            </div>
                            <div class="gzpItem">
                                <div v-for="item in GZPDataList[0].list.slice(GZPDataList[0].list.length/2)">
                                    <GuangZiPai :set-hei="true" height="22" :info="item" :isClear="+item.is_clear" :jianGeMing="item.jg_name" :name="item.state_desc" :state="Number(item.state_val)"></GuangZiPai>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </main>
        </scale-box>
        <rightClickmenuList v-if="rightMenuObj&&showMenu" :rightMenuObj="rightMenuObj" @menuItemClick="menuItemClick"></rightClickmenuList>
        <el-dialog  custom-class="yaokongPersonDialog" :visible.sync="operatorPwdDialogVisible_0" width="22%" :close-on-click-modal="false">
            <p slot="title" class="el-dialog__title">操作人</p>
            <div class="operatorPwd">
                <div class="operator">
                    <label>请输入操作人</label>
                    <el-select size="small" v-model="operatorPwdObj.username" style="width: 16rem;">
                        <el-option
                            v-for="(item,index) in userInfoJson.operatorList"
                            :key="index"
                            :label="item.username"
                            :value="item.username"
                        ></el-option>
                    </el-select>
                </div>
                <div class="pwd">
                    <label>请输入密码</label>
                    <el-input v-model="operatorPwdObj.pwd" size="small" type="password"   @keydown.enter.native="operatorPwdSubmit_0"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer" >
				<el-button size="small" @click="operatorPwdSubmit_0">确 定</el-button>
				<el-button size="small" @click="operatorPwdDialogVisible_0 = false">取 消</el-button>
			</span>
        </el-dialog>
        <el-dialog  custom-class="yaokongPersonDialog" :visible.sync="operatorPwdDialogVisible" width="22%" :close-on-click-modal="false">
            <p slot="title" class="el-dialog__title">监护人</p>
            <div class="operatorPwd">
                <div class="operator">
                    <label>请输入监护人</label>
                    <el-select size="small" v-model="adminPwdObj.username" style="width: 16rem;">
                        <el-option
                            v-for="(item,index) in userInfoJson.adminList"
                            :key="index"
                            :label="item.username"
                            :value="item.username"
                        ></el-option>
                    </el-select>

                </div>
                <div class="pwd">
                    <label>请输入监护员密码</label>
                    <el-input v-model="adminPwdObj.pwd" size="small" type="password" @keydown.enter.native="operatorPwdSubmit"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer" >
				<el-button size="small" @click="operatorPwdSubmit">确 定</el-button>
				<el-button size="small" @click="operatorPwdDialogVisible = false">取 消</el-button>
			</span>
        </el-dialog>
        <el-dialog
            custom-class="switchPatrolDialog"
            :visible.sync="dialogVisible"
            :close-on-press-escape="true"
            :close-on-click-modal="true"
            :width="`40%`"
            :modal="false"
            @before-close="handleDialogClose"
        >

            <!-- 隔离刀 -->
            <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'gelidao'">

                <!-- 遥控 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
                    <p slot="title" class="el-dialog__title">遥控</p>
                    <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
                </template>

                <!-- 开关清闪 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
                    <p slot="title" class="el-dialog__title">开关清闪</p>
                </template>



                <!-- 挂牌/摘牌 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
                    <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
                    <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
                </template>

                <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 4" size="small" @click="dialogVisible = false">取 消</el-button>

                    <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>
                    <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 6" size="small" type="primary" @click="handleBrand">确 定</el-button>

				</span>
            </template>

            <!-- 地刀 -->
            <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'didao'">
                <!--          遥控-->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
                    <p slot="title" class="el-dialog__title">遥控</p>
                    <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
                </template>
                <!-- 开关清闪 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 0">
                    <p slot="title" class="el-dialog__title">开关清闪</p>
                    <span>暂无内容</span>
                </template>

                <!-- 全站清闪 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 4">
                    <p slot="title" class="el-dialog__title">全站清闪</p>
                    <span>暂无内容</span>
                    <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
                </template>
                <!-- 挂牌/摘牌 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 5">
                    <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
                    <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
                </template>
                <span slot="footer" class="dialog-footer" >
            <!-- 遥控 按钮 -->					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 0" size="small" @click="dialogVisible = false">取 消</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>


                    <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 5" size="small" type="primary" @click="handleBrand">确 定</el-button>
				</span>
            </template>

            <!-- 断路器 -->
            <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'duanluqi'">
                <!-- 遥控 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
                    <p slot="title" class="el-dialog__title">遥控</p>
                    <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
                </template>
                <!-- 开关清闪 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
                    <p slot="title" class="el-dialog__title">开关清闪</p>
                    <span>确定要将{{currentSelectMenuItemObj.currentObj.name}}开关清闪吗？</span>
                    <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
                </template>
                <!-- 全站清闪 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 3">
                    <p slot="title" class="el-dialog__title">全站清闪</p>
                    <span>确定要将全部设备进行清闪吗？</span>
                    <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
                </template>

                <!-- 挂牌/摘牌 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
                    <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
                    <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
                </template>
                <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 4" size="small" @click="dialogVisible = false">取 消</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 2" size="small" @click="clearFlesh">确定</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 3" size="small" @click="clearAll">确定</el-button>
                    <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>

                    <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 6" size="small" type="primary" @click="handleBrand">确 定</el-button>
				</span>
            </template>

            <!-- 把手 -->
            <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'bashou'">
                <!-- 操作 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
                    <p slot="title" class="el-dialog__title">操作</p>
                    <span>暂无内容</span>
                </template>
                <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 2" size="small" @click="dialogVisible = false">取 消</el-button>

				</span>
            </template>



            <template v-if="currentSelectMenuItemObj&&currentSelectMenuItemObj.type=='ruanyaban'">
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
                    <p slot="title" class="el-dialog__title">遥控</p>
                    <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
                </template>
                <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 2" size="small" @click="dialogVisible = false">取 消</el-button>

                    <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>
				</span>
            </template>




        </el-dialog>
        <el-dialog ref="operateRecordDialogRef" custom-class="operateRecordDialog" :modal="false" :close-on-click-modal="false" v-if="operationRecordsDialogVisible" :visible.sync="operationRecordsDialogVisible" v-dialogDrag:{dialogDrag}="true" width="35%">
            <p slot="title" class="el-dialog__title">操作记录</p>
            <div class="messageAlarmList">
                <el-table :data="operationRecordsData" width="100%" height="250" >
                    <el-table-column prop="num" label="序号" width="85" header-align="center" align="center" >
                        <template #default="{row}">
                            <span :class="{'is-highlight': !!row.isHighlight}">{{row.num}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="操作时间" width="160" header-align="center" align="center" >
                        <template #default="{row}">
                            <span :class="{'is-highlight': !!row.isHighlight}">{{row.createTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="log_desc" label="操作描述" header-align="center" >
                        <template #default="{row}">
                            <span :class="{'is-highlight': !!row.isHighlight}">{{row.log_desc}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>

<style scoped lang="less">
@import "@/assets/css/public";
main {
    height: calc(100% - 90px);
    display: flex;
    color: #FFFFFF;
    border: 1px solid #fff;
    align-items: center;
    padding: 0 1rem;
    gap: 1rem;
    & > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 98%;
        &:nth-of-type(1) {
            flex: 2.2;

            & > div {
                border: 3px solid white;
            }
        }
        &:nth-of-type(2) {
            flex: 1;

        }
        &:nth-of-type(3) {
            flex: 2.5;
        }

    }
}
.line-wrapper {
    height:69%;
    padding: 10px 0;
    box-sizing: border-box;
    svg {
        width: 100%;
        height: 100%;
    }
}
.num-wrapper{
    height: 30%;
    display: flex;
}
.remote-measurement-wrapper:nth-of-type(1){
    width: 85%;
    margin: 0 auto;
}
.control-handle-wrapper {
    border: 3px solid #fff;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    .control-handle-name {
        text-align: center;
        line-height: 30px;
        font-size: 20px;
        border-bottom: none;
        padding: 4px;
    }
    .control-handle-grid {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
        .control-handle-grid-item {
            border: 1px solid #cccccc;
            height: 100px;
            text-align: center;
            padding: 0px;
            box-sizing: border-box;
            position: relative;
            .svg-wrapper {
                width: 100%;
                height: 70px;
                svg {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                }
                .rotate {
                    transform-origin: center;
                }
                .polygon-icon {
                    position: absolute;
                    left: 10px;
                    top: 36px;
                    width: 50px;
                    height: 50px;
                }
            }
            .grid-item-name {
                margin-top: 10px;
                font-size: 12px;
            }
        }
    }
}
.control-handle-wrapper:nth-of-type(1){
    height: 30%;
}
.control-handle-wrapper:nth-of-type(2){
    height: 69%;
    .control-handle-grid-item{
        height: 120px;
    }
}
.netState{
    border: 3px solid #fff;
    height: 16%;
    padding: 0 2rem;
}
.gzp-wrapper{
    border: 3px solid #fff;
    height: 82.5%;
}
.gzpInner{
    height: 93%;
    display: flex;
    justify-content: space-between;
    .gzpItem{
        width: 49%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-direction: column;
        height: 100%;
        border: 1px solid #fff;
        overflow-y: auto;
        .gzpTitle{
            font-size: 22px;
            color: #fff;
            text-align: center;
        }
    }
}
</style>
